Reduce dom elements - Approach #1 #680

Archit101967 · 2023-06-13T19:28:09Z

Description

Remove three div from FixedDataTableCellGroup and FixedDataTableRow
-> The first div was the wrapper div for the Cell group .
-> The second div was the wrapper div for the Row .
-> The third div was for row layout

Motivation and Context

-> For optimising the performance of fixed-data-table-2

How Has This Been Tested?

-> Tested using our local examples and performance dev tools

Screenshots (if appropriate):

-> First screenshot is of div_removal
-> Second screenshot is of column_virtualization

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.

… body layout div

Archit101967 · 2023-06-13T19:52:11Z

site/examples/examplesPageStyle.less

@@ -171,7 +171,7 @@
  .exampleTitle {
    margin-bottom: 0;
    overflow: hidden;
-    white-space: nowrap;
+    white-space: normal;


Change this style so that the content should not overflow from a particular cell .The text wraps to the next line when needed.

Archit101967 · 2023-06-13T20:20:53Z

src/FixedDataTableCellGroup.js


-class FixedDataTableCellGroupImpl extends React.Component {
+class FixedDataTableCellGroup extends React.Component {


We will pass all the props from FixedDataTableRow to FixedDataTableCellGroup .So, I changed the name of FixedDataTableCellGroupImpl to FixedDataTableCellGroup

Archit101967 · 2023-06-14T05:46:37Z

src/FixedDataTableCellGroup.js

@@ -59,6 +59,8 @@ class FixedDataTableCellGroupImpl extends React.Component {

    isHeaderOrFooter: PropTypes.bool,

+    offsetLeft: PropTypes.number,
+


To remove the wrapper div of CellGroup, we have to place the groups (fixed,scrollable,fixedright) according to the offsetLeft. Earlier we were seperating offsetLeft in below FixedDataTableCellGroup class component and adding one div to position the groups there .

Archit101967 · 2023-06-14T05:48:16Z

src/FixedDataTableCellGroup.js

+      this.props.offsetLeft === nextProps.offsetLeft
+    );
+  }
+


This LifeCycleMethod of React will check if there is changes in any of the following props than it will re-render the class component .

Archit101967 · 2023-06-14T05:50:03Z

src/FixedDataTableCellGroup.js

+  static defaultProps = /*object*/ {
+    left: 0,
+    offsetLeft: 0,
+  };



To place any particular cell we need these two thing one is left and the other one is offsetLeft . The left will be relative to the cell group and offsetLeft will be the position of that group from the left .

Archit101967 · 2023-06-14T06:18:23Z

src/FixedDataTableRow.js

@@ -201,17 +221,29 @@ class FixedDataTableRowImpl extends React.Component {
    var style = {
      width: this.props.width,
      height: this.props.height + subRowHeight,
+      zIndex: this.props.zIndex ? this.props.zIndex : 0,
+      position: 'absolute',
    };


To differentiate the header or group header from the other rows we are using zIndex here .We will provide the styling for the row in this div only .

Archit101967 · 2023-06-14T06:22:01Z

src/FixedDataTableRow.js

+      this._initialRender,
+      this.props.isRTL
+    );
+


FixedDataTableTranslateDOMPosition is used to set the position of the row from the top according to its offsetTop

Archit101967 · 2023-06-14T06:23:43Z

src/FixedDataTableRow.js

+          this.props.className,
+          cx('fixedDataTableRowLayout/body'),
+          cx('fixedDataTableRowLayout/rowWrapper')
+        )}


We have to join the wrapper class with the class of this div .One more div was used for fixedDataTableRowLayout also .We can join that class also to maintain the styling and removing one div also .

Archit101967 · 2023-06-14T06:24:26Z

src/css/layout/fixedDataTableCellGroupLayout.css

@@ -15,7 +15,7 @@
  overflow: hidden;
  position: absolute;
  top: 0;
-  white-space: nowrap;
+  white-space: normal;
 }



Change this style so that the content should not overflow from a particular cell .The text wraps to the next line when needed.

Archit101967 · 2023-06-14T06:25:19Z

src/FixedDataTableRow.js

-    );
-  }
-}
-
 export default FixedDataTableRow;


Now there is no need of this wrapper div .We have provided the styling and the className to the corresponding div .So we can remove this FixedDataTableRow class component and rename FixedDataTableRowImpl to FixedDataTableRow as we are passing all the props from FixedDataTable to FixedDataTableRow.

Archit Dashora and others added 4 commits June 10, 2023 13:28

Impl

f7b8628

styling change

d901e5e

Removed 3 div which included row wrapper,column wrapper and one other…

10e3187

… body layout div

Final code for removing div after deleting the unnecessary changes

67f28aa

Archit101967 commented Jun 14, 2023

View reviewed changes

pradeepnschrodinger changed the title ~~Div removal~~ Reduce dom elements - Approach #1 Jun 21, 2023

pradeepnschrodinger assigned AmanGupta2708 Oct 12, 2023

pradeepnschrodinger added the headless label Nov 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reduce dom elements - Approach #1 #680

Reduce dom elements - Approach #1 #680

Archit101967 commented Jun 13, 2023

Archit101967 Jun 13, 2023

Archit101967 Jun 13, 2023

Archit101967 Jun 14, 2023

Archit101967 Jun 14, 2023

Archit101967 Jun 14, 2023

Archit101967 Jun 14, 2023

Archit101967 Jun 14, 2023

Archit101967 Jun 14, 2023

Archit101967 Jun 14, 2023

Archit101967 Jun 14, 2023


		class FixedDataTableCellGroupImpl extends React.Component {
		class FixedDataTableCellGroup extends React.Component {

		@@ -59,6 +59,8 @@ class FixedDataTableCellGroupImpl extends React.Component {

		isHeaderOrFooter: PropTypes.bool,

		offsetLeft: PropTypes.number,

Reduce dom elements - Approach #1 #680

Are you sure you want to change the base?

Reduce dom elements - Approach #1 #680

Conversation

Archit101967 commented Jun 13, 2023

Description

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment